<template>
	<view class="list">
		<search :value="keyword"/>
		<view class="tab">
			<view class="tab-item" v-for="(item, index) in ['综合', '销量', '价格']" :key="index" @click="handleTab(index)" :class="{active: currentIndex === index}">
				{{item}}
			</view>
		</view>

		<!-- 商品列表 -->
		<view class="goods-list">
			<!-- 要循环渲染 -->
			<navigator :url="`../goods_detail/goods_detail?goodsId=${item.goods_id}`" class="goods-item" v-for="(item, index) in goodsList" :key="item.goods_id">
				<image :src="item.goods_small_logo"
				 mode="aspectFill" lazy-load></image>

				<view class="goods-info">
					<view class="goods-title">
						{{item.goods_name}}
					</view>
					<view class="goods-price">
						￥{{item.goods_price}}
					</view>
				</view>
			</navigator>
		</view>
		<view class="bottom-line" v-if="showLine">
			<text>-- 我是有底线的 --</text>
		</view>
	</view>
</template>

<script>
	import Search from '../../components/search.vue'
	export default {
		components:{
			Search
		},
		data(){
			return {
				currentIndex: 0,
				goodsList: [],
				pagenum: 1,
				keyword: '',
				showLine: false,
				noMore: false
			}
		},
		onLoad(e) {
			this.keyword = e.keyword
			this.getGoodsList()
		},
		onReachBottom() {
			this.getGoodsList()
		},
		onPullDownRefresh(){
			this.goodsList = [],
			this.pagenum = 1,
			this.showLine = false
			this.noMore = false
			this.getGoodsList()
		},
		methods:{
			handleTab(index){
				this.currentIndex = index
			},
			getGoodsList(){
				if (this.noMore) return
				uni.showLoading({
					title:"加载中",
					mask: true
				})
				uni.request({
					url: 'https://api-hmugo-web.itheima.net/api/public/v1/goods/search',
					data: {
						query: this.keyword,
						pagenum: this.pagenum,
						pagesize: 10
					},
					success: (res) => {
						const list = res.data.message.goods
						this.goodsList = this.goodsList.concat(list)
						this.pagenum++
						uni.hideLoading()
						uni.stopPullDownRefresh()
						if(this.goodsList.length === res.data.message.total){
							this.showLine = true
							this.noMore = true
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.tab {
		display: flex;
		justify-content: space-around;
		
		.tab-item {
			height: 88rpx;
			width: 184rpx;
			text-align: center;
			line-height: 88rpx;
			color: #999;
		}
		
		.active {
			border-bottom: 1px red solid;
			color: #000;
		}	
	}
	
	.goods-list {
		padding: 0 20rpx;
	}
	
	.goods-item {
		padding: 20rpx 0;
		display: flex;
		
		image{
			width: 190rpx;
			height: 190rpx;
			margin-right: 20rpx;
			// 控制元素的伸缩倍数，为0表单该元素维持原本的宽度，不被挤压
			flex-shrink: 0;
		}
		
			
		.goods-info {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			
			.goods-title {
				font-size: 14px;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
			}
			.goods-price {
				color: red;
			}
		}
	}
	.bottom-line{
		padding: 20px auto;
		text-align: center;
		text{
			color: #999;
			font-size: 14px;
		}
	}
</style>
